<template>
    <div>
        <!-- <button type="button" v-on:click="selectFile()" class="btn btn-white btn-default btn-round">
            <i class="ace-icon fa fa-upload"></i>{{ text }}
        </button> -->
        <input class="hidden" type="file" ref="file" v-on:change="uploadFile()" v-bind:id="inputId + '-input'" />
    </div>
</template>

<script>
import { white } from "@/api/white";
import axios from "axios";

export default {
    name: "auctionProcess",
    data () {
        return {
            inputId: "",
        };
    },
    methods: {

        /**
         * 上传文件
         */
        uploadFile () {
            let _this = this;
            // 1. 获取 input 中被选中的文件
            let file = _this.$refs.file.files[0];

            // 2. 生成文件标识，标识多次上传的是不是同一个文件
            //  let key = md5(file.name + file.size + file.type);
            // let key10 = parseInt(key, 16);
            // let key62 = Tool._10to62(key10);
            let time = Date.now();
            // console.log(time);
            let fileName = file.name;
            let temp = fileName.substring(0, fileName.lastIndexOf("."));
            let key62 = time + "`" + temp;
            console.log("key62=" + key62);
            // 判断文件格式 （非必选，根据实际情况选择是否需要限制文件上传类型）
            // let suffixs = _this.suffixs;s

            let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();

            // 3. 文件分片开始
            // 3.1 设置与计算分片必选参数
            let shardSize = 10 * 1024 * 1024; // 20M为一个分片
            let shardIndex = 1; // 分片索引，1表示第1个分片
            let size = file.size; // 文件的总大小
            let shardTotal = Math.ceil(size / shardSize); // 总分片数

            //  3.2 拼接将要传递到参数， use 非必选，这里用来标识文件用途。
            let param = {
                shardIndex: shardIndex,
                shardSize: shardSize,
                shardTotal: shardTotal,
                use: _this.use,
                name: file.name,
                suffix: suffix,
                size: file.size,
                key: key62,
            };

            //  3.3  传递分片参数，通过递归完成分片上传。
            _this.upload(param);
        },

        /**
         * 递归上传分片
         */
        upload (param) {
            let _this = this;
            let shardIndex = param.shardIndex;
            let shardTotal = param.shardTotal;
            let shardSize = param.shardSize;
            // 3.3.1 根据参数，获取文件分片
            let fileShard = _this.getFileShard(shardIndex, shardSize);

            // 3.3.2 将文件分片转为base64进行传输
            let fileReader = new FileReader();
            // 读取并转化 fileShard 为 base64
            fileReader.readAsDataURL(fileShard);
            //  readAsDataURL 读取后的回调，
            // 将 经过  base64 编码的  分片 整合到 param ，发送给后端，从而上传分片。
            fileReader.onload = function (e) {
                let base64 = e.target.result;
                param.shard = base64;
                //   Loading.show();
                let params = new FormData();
                params = param;
                // params.append=(param);
                // const params2 = JSON.stringify(params);
                white(params).then((res) => {
                    console.log("res", res.data);

                    //   Loading.hide();
                    // let resp = res.data;
                    // 上传结果
                    // 当前分片索引小于 分片总数，继续执行分派，反之 则表示全部上传成功。
                    if (shardIndex < shardTotal) {
                        // 上传下一个分片
                        param.shardIndex = param.shardIndex + 1;
                        // this.$message.warning('正在上传');
                        _this.upload(param);
                    } else {
                        // 文件上传成功后的回调
                        // _this.afterUpload(resp);
                        return;
                        // this.$message.success('上传成功');
                    }
                    // $('#' + _this.inputId + '-input').val('');
                });
            };
        },

        /**
         * 文件分片函数
         */
        getFileShard (shardIndex, shardSize) {
            let _this = this;
            let file = _this.$refs.file.files[0];
            let start = (shardIndex - 1) * shardSize; // 当前分片起始位置
            let end = Math.min(file.size, start + shardSize); // 当前分片结束位置
            let fileShard = file.slice(start, end); // 从文件中截取当前的分片数据
            return fileShard;
        },
    },
    mounted () { },
};
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
